<template>
	<view class="classify">
		<custom-navi :show-home="false">选择分类<view class="putin" @click="upData">提交</view></custom-navi>	
		<view class="classify-list">
			<scroll-view class="primary" scroll-y="true">
				<view v-for="(item,index) in classifyData" :key='index' class="list" @click="classifyBtn(index)" :class="{lists:sign===index}">
					{{item.managementName}}
					<view :class="{wire:sign===index}"></view>
				</view>
			</scroll-view>
			<!-- <scroll-view class="secondary" scroll-y="true">
				<view v-for="(item,index) in secondary" :key='index' class="list" @click="classBtn(index)" :class="{lists:signs===index}">
					{{item.managementName}}
					<view :class="{wire:signs===index}"></view>
				</view>
			</scroll-view>
			<scroll-view class="finally" scroll-y="true">
				<view v-for="(item,index) in finallys" :key='index' class="list" @click="finallyBtn(index)" :class="{lists:signx===index}">
					{{item.managementName}}
					<view :class="{wire:signx===index}"></view>
				</view>
			</scroll-view> -->
		</view>
	</view>
</template>

<script>
	import{
		businessType,
		saveManagementType
	} from '../../api.js'
	export default{
		data(){
			return{
				sign:'',
				signs:'',
				signx:'',
				clssify:'',
				params: {
					mcType: '1',
					prentId:'0',
					parentId:''
				},
				finallys:[],
				secondary:'',
				classifyData:[],
				shopInfo:'',
				shopId:'',
				parentId:'',
				storeSonType:'', // 店铺二级经营类型ID
				storeThreeType:'', // 店铺三级经营类型ID
			}
		},
		onLoad() {
			const _self = this
			uni.getStorage({
				key: 'shopInfo',
				success: function(res) {
					console.log(res)
					_self.shopInfo = res.data
					_self.shopId = res.data.id
				}
			});
			// this.secondary=this.classifyData[0].classList
			// this.sign=0
			// this.acquire()
			// setTimeout(() => {
			//   this.acquires()
			// }, 500)
			this.acquire().then(val => { 
			  //       this.acquires().then(val => {
					// 	this.acquirex()
					// });
			    });
			
		},
		methods:{
			upData(){
				uni.setStorageSync('clssify',this.clssify)
				this.$utils.common.navigateBack()
			},
			// async upData(){
			// 	const params = {
			// 		id:this.shopId,
			// 		storeSonType:this.storeSonType, // 店铺二级经营类型ID
			// 		storeThreeType:this.storeThreeType, // 店铺三级经营类型ID
			// 	}
			// 	try {
			// 		const {
			// 			data
			// 		} = await saveManagementType(params)
			// 			this.$utils.common.toast.fail("修改成功");
			// 			setTimeout(() => {
			// 			  return this.$utils.common.navigateBack()
			// 			}, 1000)
			// 	} catch (err) {
			// 		console.log(err)
			// 		if (err.code && err.statusCode) {
			// 			if (err.code !== 200) {
			// 				return this.$utils.common.toast.fail(err.data.message);
			// 			}
			// 			return this.$utils.common.toast.fail(err.errMsg);
			// 		}
			// 	}
			// },
			classifyBtn(index){
				// this.secondary=this.classifyData[index].classList
				this.parentId=this.classifyData[index].managementId
				if(this.sign==index){
					console.log(11)
				}else{
					this.signs=''
					// this.acquires()
				}
				this.sign=index
				// console.log(this.classifyData[index].managementName)
				this.clssify = this.classifyData[index]
				console.log(this.clssify)
			},
			classBtn(index){
				this.parentId=this.secondary[index].managementId
				this.storeSonType = this.secondary[index].managementId
				console.log(this.storeSonType)
				// console.log(this.secondary)
				if(this.signs==index){
					console.log(11)
				}else{
					this.signs=''
					this.acquirex()
				}
				// this.secondary=this.classifyData[index].classList
				this.signs=index
			},
			finallyBtn(index){
				this.signx=index
				this.storeThreeType = this.finallys[index].managementId
				console.log(this.storeThreeType)
			},
			async acquire() {
				
				try {
					const {
						data
					} = await businessType(this.params)
			
					console.log(data)
					this.classifyData=data
					console.log(this.classifyData)
					for(var i=0;this.classifyData.length;i++){
						// console.log(this.classifyData[i].managementName)
						if(this.shopInfo.storeTotalTypeDisPlay==this.classifyData[i].managementName){
							// this.classifyData[i].managementId
							this.parentId=this.classifyData[i].managementId
							this.sign=i
						}
					}
				} catch (err) {
					console.log(err)
					if (err.code && err.statusCode) {
						if (err.code !== 200) {
							return this.$utils.common.toast.fail(err.data.message);
						}
						return this.$utils.common.toast.fail(err.errMsg);
					}
				}
			},
			async acquires() {
				this.params={
					mcType: '1',
					prentId:'0',
					parentId: this.parentId
				}
				// console.log(this.params)
				try {
					const {
						data
					} = await businessType(this.params)
			
					console.log(data)
					this.secondary=data
					for(var i=0;i<this.secondary.length;i++){
						if(this.shopInfo.storeSonTypeDisPlay==this.secondary[i].managementName){
							this.signs=i
							this.parentId=this.secondary[i].managementId
						}
					}
				} catch (err) {
					console.log(err)
					if (err.code && err.statusCode) {
						if (err.code !== 200) {
							return this.$utils.common.toast.fail(err.data.message);
						}
						return this.$utils.common.toast.fail(err.errMsg);
					}
				}
			},
			async acquirex() {
				this.params={
					mcType: '1',
					prentId:'0',
					parentId: this.parentId
				}
				// console.log(this.params)
				try {
					const {
						data
					} = await businessType(this.params)
			
					console.log(data)
					this.finallys=data
					for(var i=0;i<this.finallys.length;i++){
						if(this.shopInfo.storeThreeTypeDisPlay==this.finallys[i].managementName){
							this.signx=i
						}
					}
				} catch (err) {
					console.log(err)
					if (err.code && err.statusCode) {
						if (err.code !== 200) {
							return this.$utils.common.toast.fail(err.data.message);
						}
						return this.$utils.common.toast.fail(err.errMsg);
					}
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.putin{
		  position: absolute;
		  top: 0;
		  right: 32rpx;
		  font-size:30rpx;
		  font-family:PingFang SC;
		  font-weight:500;
		  color:rgba(255,255,255,1);
		  opacity:1;
		  line-height: 44rpx;
	  }
	.classify{
		height: 100vh;
		background-color: #FFFFFF;
		&-list{
			display: flex;
			// align-items: center;
			.finally{
				width: 250rpx;
				height: 93vh;
				.list{
					width: 250rpx;
					text-align: center;
					font-size:32rpx;
					font-family:PingFang SC;
					font-weight:400;
					color:rgba(153,153,153,1);
					opacity:1;
					padding: 40rpx 0rpx;
					position:relative;
					.wire{
						position: absolute;
						width:6rpx;
						height:40rpx;
						background:rgba(12,212,211,1);
						opacity:1;
						left: 0;
						top: 33%;
					}
				}
				.lists{
					font-size:32rpx;
					font-family:PingFang SC;
					font-weight:bold;
					color:rgba(12,212,211,1);
					opacity:1;
				}
			}
			.primary{
				width: 250rpx;
				height: 93vh;
				.list{
					width: 250rpx;
					text-align: center;
					font-size:32rpx;
					font-family:PingFang SC;
					font-weight:400;
					color:rgba(153,153,153,1);
					opacity:1;
					padding: 40rpx 0rpx;
					position:relative;
					.wire{
						position: absolute;
						width:6rpx;
						height:40rpx;
						background:rgba(12,212,211,1);
						opacity:1;
						left: 0;
						top: 33%;
					}
				}
				.lists{
					font-size:32rpx;
					font-family:PingFang SC;
					font-weight:bold;
					color:rgba(12,212,211,1);
					opacity:1;
				}
			}
			.secondary{
				width: 250rpx;
				height: 93vh;
				.list{
					width: 250rpx;
					text-align: center;
					font-size:32rpx;
					font-family:PingFang SC;
					font-weight:400;
					color:rgba(153,153,153,1);
					opacity:1;
					padding: 40rpx 0rpx;
					position:relative;
					.wire{
						position: absolute;
						width:6rpx;
						height:40rpx;
						background:rgba(12,212,211,1);
						opacity:1;
						left: 0;
						top: 33%;
					}
				}
				.lists{
					font-size:32rpx;
					font-family:PingFang SC;
					font-weight:bold;
					color:rgba(12,212,211,1);
					opacity:1;
				}
			}
		}
	}
</style>
